<template>
	<div class="find_body">
		<div class="find_emial">
			邮箱：<input type="text" class="find_text" v-model="email">
			<button @click="handleVerify">发送验证码</button>
		</div>
		<div>
			新密码：<input type="text" class="find_text" v-model='password'>
		</div>
		<div>
			验证码：<input type="text" class="find_text" v-model="verify">
		</div>
		<div class="find_btn">
			<button @click="handleToPassword">修改</button>
		</div>
		<div class="find_link">
			<router-link to="/mine/login">立即登录</router-link>
			<router-link to="/mine/register">立即注册</router-link>
		</div>
	</div>
</template>

<script>
	import {messageBox} from '@/components/JS/index.js'
	export default{
		name:'findPassword',
		data(){
			return{
				email:'',
				verify:'',
				password:''
			}
		},
		methods:{
			handleVerify() {
				this.axios.get('/api2/users/verify?email=' + this.email).then(res => {
					console.log(res)
					let status = res.data.status
					if (status === 0) {
						messageBox({
							title: '验证码',
							content: '验证码已发送',
							ok: '确定'
						})
					} else {
						messageBox({
							title: '验证码',
							content: '验证码发送失败',
							ok: '确定'
						})
					}
				})
			},
			handleToPassword(){
				this.axios.post('/api2/users/findPassword',{
					email:this.email,
					password:this.password,
					verify:this.verify
				}).then(res=>{
					let status = res.data.status;
					if(status===0){
						messageBox({
							title: '修改密码',
							content: '修改密码成功',
							ok: '确定',
							handleOk(){
								this.$router.push('/mine/login')
							}
						})
					}else{
						messageBox({
							title: '修改密码',
							content: '修改密码失败',
							ok: '确定',
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	#content .find_body {
		width: 100%;
	}
	
	.find_emial {
		position: relative;
	}
	
	.find_emial button {
		position: absolute;
		right: 10px;
		top: 10px;
		height: 30px;
		border: none;
		border-radius: 3px;
		padding: 3px;
	}
	
	
	.find_body .find_text {
		width: 100%;
		height: 40px;
		border: none;
		border-bottom: 1px #ccc solid;
		margin-bottom: 5px;
		outline: none;
		text-indent: 10px;
	}
	
	.find_body .find_btn {
		height: 50px;
		margin: 10px;
	}
	
	.find_body .find_btn button {
		width: 100%;
		height: 100%;
		background: #e54847;
		border-radius: 3px;
		border: none;
		display: block;
		color: white;
		font-size: 20px;
	}
	
	.find_body .find_link {
		display: flex;
		justify-content: space-between;
	}
	
	.find_body .find_link a {
		text-decoration: none;
		margin: 0 5px;
		font-size: 12px;
		color: #e54847;
	}
</style>
